<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../../bower_components/app-route/app-location.html">
<link rel="import" href="../../bower_components/app-route/app-route.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">

<link rel="import" href="./my-page1.html">
<link rel="import" href="./my-page2.html">
<link rel="import" href="./my-page3.html">

<dom-module id="tab-set">
  <template>
    <style>
      ul.nav{
        list-style: none;
        background: #e4e7ea;
      }
      ul.nav  li{
        display: inline-block;
        width: 80px;
        height:30px;
        line-height: 30px;
        text-align: center;
        border-radius: 5px;
        padding:5px;
        cursor: pointer;
      }
      ul.nav li.active{
        background: #1f1d1d;
      }
      ul.nav li.active a {
        color: #fff;
      }
      ul.nav li a{
        text-decoration: none;
        color: #555;
      }
    </style>
    <app-location
      route="{{route}}">
    </app-location>
    
    <app-route
      route="{{route}}"
      pattern="/:view"
      data="{{routeData}}"></app-route>
    <ul class="nav nav-tabs" on-click="tabChange">
      <template is="dom-repeat" id="tabs" items="{{tabs}}">
        <li>
          <a href="[[item.view]]">{{item.title}}</a>
        </li>
      </template>
    </ul>
    <div class="content">
        <iron-pages
          selected="[[view]]"
          attr-for-selected="name">
        <my-page1 name="page1"></my-page1>
        <my-page2 name="page2"></my-page2>
        <my-page3 name="page3"></my-page3>
      </iron-pages>
    </div>
  </template>

  <script>
    class TabSet extends Polymer.Element {
      constructor(){
          super();
      }
      static get is() { return 'tab-set'; }
      static get properties() {
        return {
          view: {
            type: String,
            value: 'page1',

          },
          tabs:{
            type: Array,
            value:[{
              title: "内容1",
              view: 'page1',
              selected: true
            },{
              title: "内容2",
              view: 'page2',
              selected: false
            },{
              title: "内容3",
              view: 'page3',
              selected: false
            }]
          }
        }
      }
      static get observers() {
        return [
          '_routeDataChanged(routeData.view)',
        ];
      }
      _routeDataChanged(view) {
        this.view = view || 'page1';
      }
      tabChange(e) {
        let item = this.$.tabs.itemForElement(e.target);
        this.view = item.view;
      }
    }
    window.customElements.define(TabSet.is, TabSet);
  </script>
</dom-module>
